<template>
	<view class="mlr-26">
		<view class="mt-20 bg-white card1 " v-for="(item,index) in list" :key="index">

			<view class="flex mlr-20 mt-50">
				<view class="bold " style="" @click="delCar(index)">
					<u-icon class="close1" name="close" size="10" color="#3CBCA3"></u-icon>
				</view>
				<!-- 车牌 -->
				<view class="size-45" style="position: absolute; margin-left: 30rpx; ">
					{{item.car_pai?item.car_pai:'浙A66666'}}
				</view>
				<!-- 车照片 -->
				<view class="mt-30">
					<img v-if="item.car_img.length>0" class="img-sty" :src="item.car_img" alt="错误">
					<u-icon v-else class="center mr-30" name="car" color="#4297ff" size="150">
					</u-icon>
				</view>
			</view>
			<!-- 车信息 -->
			<view class="wrap">
				<u-row gutter="16">
					<u-col span="4">
						<view class="demo-layout bold center">{{item.car_name?item.car_name:'奥迪A8'}}</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bold center">{{item.car_licheng?item.car_licheng:'6666'}}km</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout bold center">{{item.car_type?item.car_type:'常规车'}}</view>
					</u-col>
				</u-row>
				<u-row gutter="16">
					<u-col span="4">
						<view class="demo-layout center gray-2">车辆品牌</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout center gray-2">里程</view>
					</u-col>
					<u-col span="4">
						<view class="demo-layout center gray-2">类型</view>
					</u-col>
				</u-row>

			</view>
		</view>

		<view class="center mt-60 bg-white card2 " @click="goCarInfo()">
			<u-icon size="70" color="#FC9153" name="plus"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				list: [],
				user_id: '', //用户id
				car_username: '', //车主姓名
				car_userphone: '', //车主手机号
				car_pai: '', //车牌
				car_type: '', //车辆型号
				car_name: '', //车辆品牌
				car_img: '', //图片
				car_licheng: '', //车辆里程
			}
		},
		onLoad() {
			this.getUserInfo();
			this.getCar()
		},
		// computed: {
		// 	...mapState(["start"])
		// },
		methods: {
			delCar(e) {
				let that = this;
				let id = this.list[e].id; //获取用户id
				// console.log(this.list[e].id);
				uni.showModal({
					title: '提示',
					content: '确认删除此条车辆信息？',
					success: function(res) {
						if (res.confirm) {
							that.$http('/index.php/api/index/delcar', {
								user_id: that.user_id,
								id: id
							}, "POST").then((data) => {
								uni.showToast({
									title: "删除车辆信息成功"
								})
								that.getCar();
							})
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			goCarInfo() {
				uni.navigateTo({
					url: '../my/CarInfrmation'
				})
			},
			getUserInfo() {
				this.$http('/addons/ddrive/user/userInfo ', {}, "GET").then(data => {
					this.user_id = data.id;
					// console.log(data);
					uni.stopPullDownRefresh();
				})
			},
			getCar() {
				this.$http('/index.php/api/index/carindex', {
					user_id: '282',
				}, "POST").then((data) => {
					this.list = data;
					console.log(data);
					uni.showToast({
						icon: 'none',
						title: "查询成功",
						duration: 300
					})

				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.img-sty {
		width: 250rpx;
		height: 160rpx;
		border-radius: 16rpx;
		border: 1px #d5d5d5 solid;
	}

	.wrap {
		padding: 10rpx;
	}

	.u-row {
		margin: 8rpx 0;
	}

	.demo-layout {
		height: 50rpx;
		border-radius: 8rpx;
	}

	.card1 {
		height: 360rpx;
		box-shadow: 1px 1px 14px #cdd4d3;
		border-radius: 15rpx;
	}

	.card2 {
		height: 99rpx;
		box-shadow: 1px 1px 14px #cfd6d5;
		border-radius: 15rpx;
	}

	.close1 {
		border: 1px solid #3CBCA3;
		padding: 5rpx;
		border-radius: 120rpx;
		margin-left: -30rpx;
		// transform: translateX(-40rpx);
		transform: translateY(-95rpx);
		// margin-top: -150rpx;
		// margin-left: -16rpx;
		// width: 0rpx;
	}
</style>
